<template>
  <div class="root">
    <div class="pay">
      <svg style="margin-top: 50px;" t="1738484273105" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4211" 
      width="64" height="64"><path d="M1024 512c0 282.781538-229.218462 512-512 512S0 794.781538 0 512 229.218462 0 512 0s512 229.218462 512 512" fill="#07C160" p-id="4212"></path><path d="M804.194462 315.785846a51.2 51.2 0 0 0-72.388924 0l-283.766153 283.844923-155.844923-155.844923a51.2 51.2 0 0 0-72.388924 72.467692l192 191.960616c9.964308 10.003692 23.04 14.966154 36.233847 14.966154 13.115077 0 26.151385-4.962462 36.155077-14.966154l320-320a51.278769 51.278769 0 0 0 0-72.467692" fill="#FFFFFF" p-id="4213"></path></svg>
      <span>订单支付成功</span>
    </div>
    <!-- <el-divider /> -->
    <!-- <div class="status">
      <p style="color: #bbb;font-size: 18px;">订单信息</p>
      <p style="font-size: 22px;">订单号：xxxxxxxxxxx</p>
      <p style="font-size: 22px;">订单金额：￥xxx</p>
    </div> -->
    <el-divider />
    <div class="back">
      <span class="font" @click="backHome">返回首页</span>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const $router=useRouter()
const backHome=()=>{
  $router.push('/home')
}
</script>

<style lang="scss" scoped>
.root{
  min-width: 1800px;
  // height:1080px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .pay{
    position: relative;
    margin-left: -100px;
    span{
      font-size: 28px;
      position: absolute;
      width: 180px;
      top:65px;
      left: 80px;
    }
    span:hover{
      cursor: pointer;
    }
  }
  .back{
    height: 50px;
    width: 110px;
    border: 2px solid #3acaae;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 35px;
    .font{
      color: #3acaae;
      font-size: 22px;
    }
    .font:hover{
      cursor: pointer;
    }
  }
}
</style>
